/* eslint-disable import/no-anonymous-default-export */
/* eslint-disable jsx-a11y/anchor-is-valid */
import { useState, useRef, useEffect } from "react";
import { useNavigate, NavLink } from "react-router";
import * as echarts from "echarts";
import "./style.scss";
import Ai_Ping_Img from "../../assets/img/ai-ping.pic.jpg";
import AiLogo from "../../assets/img/aipin-logo.png";

export default () => {
  const growthChartRef = useRef(null);
  const matchRateChartRef = useRef(null);
  let growthChart = null;
  let matchRateChart = null;

  let navigate = useNavigate();

  useEffect(() => {
    const growthOption = {
      animation: false,
      tooltip: {
        trigger: "axis",
        backgroundColor: "rgba(255, 255, 255, 0.8)",
        textStyle: {
          color: "#1f2937",
        },
      },
      legend: {
        data: ["企业用户", "求职者用户"],
        textStyle: {
          color: "#1f2937",
        },
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      xAxis: {
        type: "category",
        boundaryGap: false,
        data: ["2024-Q2", "2024-Q3", "2024-Q4", "2025-Q1", "2025-Q2"],
        axisLabel: {
          color: "#1f2937",
        },
      },
      yAxis: {
        type: "value",
        axisLabel: {
          color: "#1f2937",
        },
      },
      series: [
        {
          name: "企业用户",
          type: "line",
          smooth: true,
          symbol: "none",
          lineStyle: {
            width: 3,
            color: "rgba(87, 181, 231, 1)",
          },
          areaStyle: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "rgba(87, 181, 231, 0.2)",
                },
                {
                  offset: 1,
                  color: "rgba(87, 181, 231, 0.01)",
                },
              ],
            },
          },
          data: [4200, 5800, 7600, 9800, 12580],
        },
        {
          name: "求职者用户",
          type: "line",
          smooth: true,
          symbol: "none",
          lineStyle: {
            width: 3,
            color: "rgba(141, 211, 199, 1)",
          },
          areaStyle: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "rgba(141, 211, 199, 0.2)",
                },
                {
                  offset: 1,
                  color: "rgba(141, 211, 199, 0.01)",
                },
              ],
            },
          },
          data: [52000, 78000, 110000, 156000, 186420],
        },
      ],
    };

    growthChart = echarts.init(growthChartRef.current);
    growthChart.setOption(growthOption);
  }, []);

  useEffect(() => {
    const matchRateOption = {
      animation: false,
      tooltip: {
        trigger: "item",
        backgroundColor: "rgba(255, 255, 255, 0.8)",
        textStyle: {
          color: "#1f2937",
        },
      },
      legend: {
        orient: "vertical",
        right: 10,
        top: "center",
        textStyle: {
          color: "#1f2937",
        },
      },
      series: [
        {
          name: "匹配结果",
          type: "pie",
          radius: ["40%", "70%"],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 8,
            borderColor: "#fff",
            borderWidth: 2,
          },
          label: {
            show: false,
            position: "center",
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 16,
              fontWeight: "bold",
            },
          },
          labelLine: {
            show: false,
          },
          data: [
            {
              value: 68.4,
              name: "完美匹配",
              itemStyle: { color: "rgba(87, 181, 231, 1)" },
            },
            {
              value: 26.2,
              name: "良好匹配",
              itemStyle: { color: "rgba(141, 211, 199, 1)" },
            },
            {
              value: 4.3,
              name: "一般匹配",
              itemStyle: { color: "rgba(251, 191, 114, 1)" },
            },
            {
              value: 1.1,
              name: "需改进匹配",
              itemStyle: { color: "rgba(252, 141, 98, 1)" },
            },
          ],
        },
      ],
    };

    matchRateChart = echarts.init(matchRateChartRef.current);
    matchRateChart.setOption(matchRateOption);
  }, []);

  useEffect(() => {
    const resizeFn = () => {
      growthChart && growthChart.resize();
      matchRateChart && matchRateChart.resize();
    };

    window.addEventListener("resize", resizeFn);
    return () => {
      window.removeEventListener("resize", resizeFn);
    };
  }, []);

  return (
    <div className="font-sans text-gray-800 home-page">
      <header className="fixed top-0 left-0 right-0 z-50 bg-white bg-opacity-95 shadow-sm">
        <div className="container mx-auto px-4 py-4 flex justify-between items-center">
          {/* <a href="#" className="text-3xl font-['Pacifico'] text-primary">
            艾聘 AIPIN
          </a> */}
          <a href="javascript:;">
            <img className="block" src={AiLogo} alt="" width="100" />
          </a>
          {/* <nav className="hidden md:flex items-center space-x-8">
            <a
              href="#features"
              className="text-gray-700 hover:text-primary transition-colors"
            >
              核心功能
            </a>
            <a
              href="#career"
              className="text-gray-700 hover:text-primary transition-colors"
            >
              职业发展
            </a>
            <a
              href="#advantages"
              className="text-gray-700 hover:text-primary transition-colors"
            >
              平台优势
            </a>
            <a
              href="#"
              className="text-gray-700 hover:text-primary transition-colors"
            >
              关于我们
            </a>
          </nav> */}
          {/* <div className="flex items-center space-x-4">
            <a
              href="#"
              className="text-gray-700 hover:text-primary whitespace-nowrap"
            >
              企业入口
            </a>
            <a
              href="#"
              className="text-gray-700 hover:text-primary whitespace-nowrap"
            >
              求职者入口
            </a>
            <button className="bg-primary text-white px-4 py-2 !rounded-button hover:bg-blue-600 transition-colors whitespace-nowrap">
              登录 / 注册
            </button>
          </div> */}
        </div>
      </header>
      <section className="hero-section pt-32 pb-20">
        <div className="container mx-auto px-4 w-full">
          <div className="flex flex-col md:flex-row items-center">
            <div className="md:w-1/2 mb-10 md:mb-0">
              <h1 className="text-4xl md:text-5xl font-bold mb-4 text-gray-900">
                AI 驱动的新一代
                <br />
                智能招聘平台
              </h1>
              <p className="text-xl text-gray-700 mb-8">
                连接企业与人才的智能桥梁，让招聘更高效，求职更精准
              </p>
              <div className="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
                <NavLink to="/recruitmanage" className="bg-primary text-white px-8 py-3 !rounded-button hover:bg-blue-600 transition-colors whitespace-nowrap" >
                  <div className="flex items-center">
                    <span>我要招聘</span>
                  </div>
                </NavLink>
                <NavLink to="/profile" className="bg-white text-primary border-2 border-primary px-8 py-3 !rounded-button hover:bg-gray-50 transition-colors whitespace-nowrap inline-block" >
                  <div className="flex items-center">
                    <span>我要求职</span>
                  </div>
                </NavLink>
              </div>
            </div>
            <div className="md:w-1/2"></div>
          </div>
        </div>
      </section>
      <section id="features" className="py-20 bg-gray-50">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <h2 className="text-3xl font-bold mb-4">四大核心功能</h2>
            <p className="text-gray-600 max-w-2xl mx-auto">
              艾聘 AIPIN
              利用先进的人工智能技术，为企业和求职者提供全方位的招聘解决方案
            </p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            <div className="feature-card bg-white p-6 rounded-lg shadow-md">
              <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6 mx-auto">
                <div className="w-8 h-8 flex items-center justify-center text-primary">
                  <i className="ri-shield-check-line ri-2x"></i>
                </div>
              </div>
              <h3 className="text-xl font-bold mb-3 text-center">企业认证</h3>
              <p className="text-gray-600 text-center mb-4">
                严格的企业资质审核，确保平台企业真实可靠，为求职者提供安全保障
              </p>
              <ul className="space-y-2 text-sm text-gray-600">
                <li className="flex items-start">
                  <div className="w-5 h-5 flex items-center justify-center text-primary mt-0.5 mr-2">
                    <i className="ri-check-line"></i>
                  </div>
                  <span>营业执照与资质验证</span>
                </li>
                <li className="flex items-start">
                  <div className="w-5 h-5 flex items-center justify-center text-primary mt-0.5 mr-2">
                    <i className="ri-check-line"></i>
                  </div>
                  <span>企业信用评级</span>
                </li>
                <li className="flex items-start">
                  <div className="w-5 h-5 flex items-center justify-center text-primary mt-0.5 mr-2">
                    <i className="ri-check-line"></i>
                  </div>
                  <span>企业文化与环境展示</span>
                </li>
              </ul>
            </div>
            <div className="feature-card bg-white p-6 rounded-lg shadow-md">
              <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6 mx-auto">
                <div className="w-8 h-8 flex items-center justify-center text-primary">
                  <i className="ri-user-star-line ri-2x"></i>
                </div>
              </div>
              <h3 className="text-xl font-bold mb-3 text-center">候选人认证</h3>
              <p className="text-gray-600 text-center mb-4">
                多维度的个人能力评估系统，帮助求职者展示真实能力，提升求职竞争力
              </p>
              <ul className="space-y-2 text-sm text-gray-600">
                <li className="flex items-start">
                  <div className="w-5 h-5 flex items-center justify-center text-primary mt-0.5 mr-2">
                    <i className="ri-check-line"></i>
                  </div>
                  <span>学历与工作经验验证</span>
                </li>
                <li className="flex items-start">
                  <div className="w-5 h-5 flex items-center justify-center text-primary mt-0.5 mr-2">
                    <i className="ri-check-line"></i>
                  </div>
                  <span>专业技能评估</span>
                </li>
                <li className="flex items-start">
                  <div className="w-5 h-5 flex items-center justify-center text-primary mt-0.5 mr-2">
                    <i className="ri-check-line"></i>
                  </div>
                  <span>软技能与性格分析</span>
                </li>
              </ul>
            </div>
            <div className="feature-card bg-white p-6 rounded-lg shadow-md">
              <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6 mx-auto">
                <div className="w-8 h-8 flex items-center justify-center text-primary">
                  <i className="ri-link-m-line ri-2x"></i>
                </div>
              </div>
              <h3 className="text-xl font-bold mb-3 text-center">
                智能精准匹配
              </h3>
              <p className="text-gray-600 text-center mb-4">
                基于深度学习的职位匹配算法，精准推荐最适合的职位和人才
              </p>
              <ul className="space-y-2 text-sm text-gray-600">
                <li className="flex items-start">
                  <div className="w-5 h-5 flex items-center justify-center text-primary mt-0.5 mr-2">
                    <i className="ri-check-line"></i>
                  </div>
                  <span>技能与岗位需求匹配</span>
                </li>
                <li className="flex items-start">
                  <div className="w-5 h-5 flex items-center justify-center text-primary mt-0.5 mr-2">
                    <i className="ri-check-line"></i>
                  </div>
                  <span>企业文化与个人价值观匹配</span>
                </li>
                <li className="flex items-start">
                  <div className="w-5 h-5 flex items-center justify-center text-primary mt-0.5 mr-2">
                    <i className="ri-check-line"></i>
                  </div>
                  <span>职业发展路径规划</span>
                </li>
              </ul>
            </div>
            <div className="feature-card bg-white p-6 rounded-lg shadow-md">
              <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6 mx-auto">
                <div className="w-8 h-8 flex items-center justify-center text-primary">
                  <i className="ri-robot-line ri-2x"></i>
                </div>
              </div>
              <h3 className="text-xl font-bold mb-3 text-center">数字人面试</h3>
              <p className="text-gray-600 text-center mb-4">
                AI 驱动的数字人面试官，提供标准化的初筛面试，降低招聘成本
              </p>
              <ul className="space-y-2 text-sm text-gray-600">
                <li className="flex items-start">
                  <div className="w-5 h-5 flex items-center justify-center text-primary mt-0.5 mr-2">
                    <i className="ri-check-line"></i>
                  </div>
                  <span>24/7 随时面试</span>
                </li>
                <li className="flex items-start">
                  <div className="w-5 h-5 flex items-center justify-center text-primary mt-0.5 mr-2">
                    <i className="ri-check-line"></i>
                  </div>
                  <span>自适应问题生成</span>
                </li>
                <li className="flex items-start">
                  <div className="w-5 h-5 flex items-center justify-center text-primary mt-0.5 mr-2">
                    <i className="ri-check-line"></i>
                  </div>
                  <span>面试表现智能分析</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </section>
      <section id="career" className="py-20 bg-white">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <h2 className="text-3xl font-bold mb-4">全方位的职业发展支持</h2>
            <p className="text-gray-600 max-w-2xl mx-auto">
              不仅仅是一个求职平台，艾聘 AIPIN 更是您职业成长的长期伙伴
            </p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div className="bg-gray-50 rounded-lg overflow-hidden shadow-md">
              <div className="h-48 overflow-hidden">
                <img
                  src="https://readdy.ai/api/search-image?query=A%20professional%20classroom%20setting%20with%20diverse%20students%20engaged%20in%20learning.%20The%20scene%20shows%20people%20of%20different%20ages%20and%20backgrounds%20participating%20in%20a%20modern%20training%20session%20with%20digital%20screens%20and%20collaborative%20workspaces.%20The%20image%20has%20a%20clean%2C%20professional%20aesthetic%20with%20soft%20lighting%20and%20a%20blue%20color%20accent.%20High-quality%2C%20photorealistic%20image%20showing%20career%20development%20and%20professional%20education.&width=600&height=400&seq=2&orientation=landscape"
                  alt="职业培训课程"
                  className="w-full h-full object-cover object-top"
                />
              </div>
              <div className="p-6">
                <h3 className="text-xl font-bold mb-3">职业培训课程</h3>
                <p className="text-gray-600 mb-4">
                  根据市场需求和个人发展方向，提供针对性的技能提升课程
                </p>
                <ul className="space-y-2 text-sm text-gray-600 mb-6">
                  <li className="flex items-start">
                    <div className="w-5 h-5 flex items-center justify-center text-primary mt-0.5 mr-2">
                      <i className="ri-check-line"></i>
                    </div>
                    <span>行业专家授课</span>
                  </li>
                  <li className="flex items-start">
                    <div className="w-5 h-5 flex items-center justify-center text-primary mt-0.5 mr-2">
                      <i className="ri-check-line"></i>
                    </div>
                    <span>实战项目演练</span>
                  </li>
                  <li className="flex items-start">
                    <div className="w-5 h-5 flex items-center justify-center text-primary mt-0.5 mr-2">
                      <i className="ri-check-line"></i>
                    </div>
                    <span>学习进度追踪</span>
                  </li>
                </ul>
                <button
                  className="text-primary font-medium flex items-center !rounded-button whitespace-nowrap"
                  onClick={() => {
                    navigate("/login");
                  }}
                >
                  <span>探索课程</span>
                  <div className="w-5 h-5 flex items-center justify-center ml-1">
                    <i className="ri-arrow-right-line"></i>
                  </div>
                </button>
              </div>
            </div>
            <div className="bg-gray-50 rounded-lg overflow-hidden shadow-md">
              <div className="h-48 overflow-hidden">
                <img
                  src="https://readdy.ai/api/search-image?query=A%20professional%20career%20counseling%20session%20between%20a%20career%20advisor%20and%20a%20client.%20They%20are%20reviewing%20career%20path%20documents%20and%20digital%20career%20planning%20tools%20on%20a%20modern%20desk.%20The%20scene%20shows%20a%20supportive%2C%20professional%20environment%20with%20career%20roadmaps%20visible%20on%20screens.%20The%20image%20has%20a%20clean%2C%20professional%20aesthetic%20with%20soft%20lighting%20and%20a%20blue%20color%20accent.%20High-quality%2C%20photorealistic%20image%20showing%20career%20guidance%20and%20professional%20planning.&width=600&height=400&seq=3&orientation=landscape"
                  alt="职业规划指导"
                  className="w-full h-full object-cover object-top"
                />
              </div>
              <div className="p-6">
                <h3 className="text-xl font-bold mb-3">职业规划指导</h3>
                <p className="text-gray-600 mb-4">
                  专业职业顾问一对一指导，帮助制定个性化的职业发展规划
                </p>
                <ul className="space-y-2 text-sm text-gray-600 mb-6">
                  <li className="flex items-start">
                    <div className="w-5 h-5 flex items-center justify-center text-primary mt-0.5 mr-2">
                      <i className="ri-check-line"></i>
                    </div>
                    <span>职业兴趣评估</span>
                  </li>
                  <li className="flex items-start">
                    <div className="w-5 h-5 flex items-center justify-center text-primary mt-0.5 mr-2">
                      <i className="ri-check-line"></i>
                    </div>
                    <span>行业发展趋势分析</span>
                  </li>
                  <li className="flex items-start">
                    <div className="w-5 h-5 flex items-center justify-center text-primary mt-0.5 mr-2">
                      <i className="ri-check-line"></i>
                    </div>
                    <span>个性化职业路径规划</span>
                  </li>
                </ul>
                <button
                  className="text-primary font-medium flex items-center !rounded-button whitespace-nowrap"
                  onClick={() => {
                    navigate("/login");
                  }}
                >
                  <span>预约咨询</span>
                  <div className="w-5 h-5 flex items-center justify-center ml-1">
                    <i className="ri-arrow-right-line"></i>
                  </div>
                </button>
              </div>
            </div>
            <div className="bg-gray-50 rounded-lg overflow-hidden shadow-md">
              <div className="h-48 overflow-hidden">
                <img
                  src="https://readdy.ai/api/search-image?query=A%20visual%20representation%20of%20a%20professional%20skill%20development%20roadmap%20with%20clear%20progression%20paths.%20The%20image%20shows%20a%20digital%20interface%20with%20connected%20nodes%20representing%20different%20skill%20levels%20and%20career%20milestones.%20There%20are%20charts%2C%20graphs%2C%20and%20visual%20indicators%20of%20progress.%20The%20scene%20has%20a%20modern%2C%20tech-focused%20aesthetic%20with%20blue%20accent%20colors.%20High-quality%2C%20photorealistic%20image%20showing%20career%20progression%20and%20skill%20development%20planning.&width=600&height=400&seq=4&orientation=landscape"
                  alt="技能提升路径图"
                  className="w-full h-full object-cover object-top"
                />
              </div>
              <div className="p-6">
                <h3 className="text-xl font-bold mb-3">技能提升路径图</h3>
                <p className="text-gray-600 mb-4">
                  基于大数据分析的技能图谱，清晰展示行业所需技能和学习路径
                </p>
                <ul className="space-y-2 text-sm text-gray-600 mb-6">
                  <li className="flex items-start">
                    <div className="w-5 h-5 flex items-center justify-center text-primary mt-0.5 mr-2">
                      <i className="ri-check-line"></i>
                    </div>
                    <span>热门技能趋势分析</span>
                  </li>
                  <li className="flex items-start">
                    <div className="w-5 h-5 flex items-center justify-center text-primary mt-0.5 mr-2">
                      <i className="ri-check-line"></i>
                    </div>
                    <span>个人技能差距评估</span>
                  </li>
                  <li className="flex items-start">
                    <div className="w-5 h-5 flex items-center justify-center text-primary mt-0.5 mr-2">
                      <i className="ri-check-line"></i>
                    </div>
                    <span>定制化学习建议</span>
                  </li>
                </ul>
                <button
                  className="text-primary font-medium flex items-center !rounded-button whitespace-nowrap"
                  onClick={() => {
                    navigate("/login");
                  }}
                >
                  <span>查看路径图</span>
                  <div className="w-5 h-5 flex items-center justify-center ml-1">
                    <i className="ri-arrow-right-line"></i>
                  </div>
                </button>
              </div>
            </div>
          </div>
        </div>
      </section>
      <section id="advantages" className="py-20 bg-gray-50">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <h2 className="text-3xl font-bold mb-4">平台优势数据</h2>
            <p className="text-gray-600 max-w-2xl mx-auto">
              艾聘 AIPIN 通过 AI
              技术，为企业和求职者创造更高效、更精准的招聘体验
            </p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-16">
            <div className="bg-white p-6 rounded-lg shadow-md">
              <h3 className="text-xl font-bold mb-6">平台增长数据</h3>
              <div
                id="growthChart"
                ref={growthChartRef}
                className="w-full h-80"
              ></div>
            </div>
            <div className="bg-white p-6 rounded-lg shadow-md">
              <h3 className="text-xl font-bold mb-6">匹配成功率</h3>
              <div
                id="matchRateChart"
                ref={matchRateChartRef}
                className="w-full h-80"
              ></div>
            </div>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
            <div className="bg-white p-6 rounded-lg shadow-md text-center">
              <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4 mx-auto">
                <div className="w-8 h-8 flex items-center justify-center text-primary">
                  <i className="ri-building-line ri-2x"></i>
                </div>
              </div>
              <h4 className="text-3xl font-bold text-primary mb-2">12,580+</h4>
              <p className="text-gray-600">认证企业</p>
            </div>
            <div className="bg-white p-6 rounded-lg shadow-md text-center">
              <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4 mx-auto">
                <div className="w-8 h-8 flex items-center justify-center text-primary">
                  <i className="ri-user-line ri-2x"></i>
                </div>
              </div>
              <h4 className="text-3xl font-bold text-primary mb-2">186,420+</h4>
              <p className="text-gray-600">认证求职者</p>
            </div>
            <div className="bg-white p-6 rounded-lg shadow-md text-center">
              <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4 mx-auto">
                <div className="w-8 h-8 flex items-center justify-center text-primary">
                  <i className="ri-link-m-line ri-2x"></i>
                </div>
              </div>
              <h4 className="text-3xl font-bold text-primary mb-2">94.6%</h4>
              <p className="text-gray-600">匹配准确率</p>
            </div>
            <div className="bg-white p-6 rounded-lg shadow-md text-center">
              <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4 mx-auto">
                <div className="w-8 h-8 flex items-center justify-center text-primary">
                  <i className="ri-time-line ri-2x"></i>
                </div>
              </div>
              <h4 className="text-3xl font-bold text-primary mb-2">68%</h4>
              <p className="text-gray-600">招聘时间缩短</p>
            </div>
          </div>
        </div>
      </section>
      <section className="py-20 bg-white">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <h2 className="text-3xl font-bold mb-4">用户评价</h2>
            <p className="text-gray-600 max-w-2xl mx-auto">
              听听我们的用户怎么说
            </p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div className="bg-gray-50 p-6 rounded-lg shadow-md">
              <div className="flex items-center mb-4">
                <div className="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mr-4">
                  <div className="w-6 h-6 flex items-center justify-center text-primary">
                    <i className="ri-user-line"></i>
                  </div>
                </div>
                <div>
                  <h4 className="font-bold">赵明宇</h4>
                  <p className="text-sm text-gray-500">高级软件工程师</p>
                </div>
              </div>
              <p className="text-gray-600 mb-4">
                "艾聘的智能匹配功能非常精准，推荐给我的职位都很符合我的技能和期望。通过平台上的数字人面试，我顺利获得了现在这份工作，整个过程高效且专业。"
              </p>
              <div className="flex text-yellow-400">
                <div className="w-5 h-5 flex items-center justify-center">
                  <i className="ri-star-fill"></i>
                </div>
                <div className="w-5 h-5 flex items-center justify-center">
                  <i className="ri-star-fill"></i>
                </div>
                <div className="w-5 h-5 flex items-center justify-center">
                  <i className="ri-star-fill"></i>
                </div>
                <div className="w-5 h-5 flex items-center justify-center">
                  <i className="ri-star-fill"></i>
                </div>
                <div className="w-5 h-5 flex items-center justify-center">
                  <i className="ri-star-fill"></i>
                </div>
              </div>
            </div>
            <div className="bg-gray-50 p-6 rounded-lg shadow-md">
              <div className="flex items-center mb-4">
                <div className="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mr-4">
                  <div className="w-6 h-6 flex items-center justify-center text-primary">
                    <i className="ri-user-line"></i>
                  </div>
                </div>
                <div>
                  <h4 className="font-bold">林雪梅</h4>
                  <p className="text-sm text-gray-500">人力资源总监</p>
                </div>
              </div>
              <p className="text-gray-600 mb-4">
                "作为一家快速发展的科技公司，我们需要高效地招聘合适的人才。艾聘的数字人面试大大提高了我们的筛选效率，AI
                匹配功能帮我们找到了最合适的候选人。"
              </p>
              <div className="flex text-yellow-400">
                <div className="w-5 h-5 flex items-center justify-center">
                  <i className="ri-star-fill"></i>
                </div>
                <div className="w-5 h-5 flex items-center justify-center">
                  <i className="ri-star-fill"></i>
                </div>
                <div className="w-5 h-5 flex items-center justify-center">
                  <i className="ri-star-fill"></i>
                </div>
                <div className="w-5 h-5 flex items-center justify-center">
                  <i className="ri-star-fill"></i>
                </div>
                <div className="w-5 h-5 flex items-center justify-center">
                  <i className="ri-star-fill"></i>
                </div>
              </div>
            </div>
            <div className="bg-gray-50 p-6 rounded-lg shadow-md">
              <div className="flex items-center mb-4">
                <div className="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mr-4">
                  <div className="w-6 h-6 flex items-center justify-center text-primary">
                    <i className="ri-user-line"></i>
                  </div>
                </div>
                <div>
                  <h4 className="font-bold">陈俊杰</h4>
                  <p className="text-sm text-gray-500">应届毕业生</p>
                </div>
              </div>
              <p className="text-gray-600 mb-4">
                "作为应届生，我最初对找工作感到迷茫。艾聘的职业规划指导和技能提升路径图帮我明确了发展方向，通过平台的培训课程提升了自己，最终找到了理想的工作。"
              </p>
              <div className="flex text-yellow-400">
                <div className="w-5 h-5 flex items-center justify-center">
                  <i className="ri-star-fill"></i>
                </div>
                <div className="w-5 h-5 flex items-center justify-center">
                  <i className="ri-star-fill"></i>
                </div>
                <div className="w-5 h-5 flex items-center justify-center">
                  <i className="ri-star-fill"></i>
                </div>
                <div className="w-5 h-5 flex items-center justify-center">
                  <i className="ri-star-fill"></i>
                </div>
                <div className="w-5 h-5 flex items-center justify-center">
                  <i className="ri-star-half-fill"></i>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <section className="py-16 bg-primary">
        <div className="container mx-auto px-4">
          <div className="max-w-3xl mx-auto text-center">
            <h2 className="text-3xl font-bold text-white mb-4">
              订阅我们的招聘资讯
            </h2>
            <p className="text-white opacity-90 mb-8">
              获取最新的职场动态、招聘信息和职业发展指南
            </p>
            <div className="text-center">
              <img className="block m-auto" src={Ai_Ping_Img} alt="" />
            </div>
            {/* <form className="flex flex-col sm:flex-row gap-4 max-w-xl mx-auto">
              <input
                type="email"
                placeholder="请输入您的邮箱地址"
                className="flex-1 px-4 py-3 rounded-lg border-none focus:outline-none focus:ring-2 focus:ring-blue-300 text-sm"
              />
              <button
                type="submit"
                className="bg-white text-primary px-6 py-3 !rounded-button hover:bg-gray-100 transition-colors whitespace-nowrap"
              >
                立即订阅
              </button>
            </form> */}
          </div>
        </div>
      </section>
      <footer className="bg-gray-900 text-white pt-16 pb-8">
        <div className="container mx-auto px-4">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12">
            <div>
              <h3 className="text-2xl font-['Pacifico'] mb-6">艾聘 AIPIN</h3>
              <p className="text-gray-400 mb-6">
                AI 驱动的新一代智能招聘平台，连接企业与人才的智能桥梁
              </p>
              <div className="flex space-x-4">
                <a
                  href="#"
                  className="text-gray-400 hover:text-white transition-colors"
                >
                  <div className="w-10 h-10 flex items-center justify-center bg-gray-800 rounded-full">
                    <i className="ri-wechat-fill"></i>
                  </div>
                </a>
                <a
                  href="#"
                  className="text-gray-400 hover:text-white transition-colors"
                >
                  <div className="w-10 h-10 flex items-center justify-center bg-gray-800 rounded-full">
                    <i className="ri-weibo-fill"></i>
                  </div>
                </a>
                <a
                  href="#"
                  className="text-gray-400 hover:text-white transition-colors"
                >
                  <div className="w-10 h-10 flex items-center justify-center bg-gray-800 rounded-full">
                    <i className="ri-linkedin-fill"></i>
                  </div>
                </a>
              </div>
            </div>
            <div>
              <h4 className="text-lg font-bold mb-6">快速链接</h4>
              <ul className="space-y-3">
                <li>
                  <a
                    href="#"
                    className="text-gray-400 hover:text-white transition-colors"
                  >
                    关于我们
                  </a>
                </li>
                <li>
                  <a
                    href="#"
                    className="text-gray-400 hover:text-white transition-colors"
                  >
                    企业服务
                  </a>
                </li>
                <li>
                  <a
                    href="#"
                    className="text-gray-400 hover:text-white transition-colors"
                  >
                    求职服务
                  </a>
                </li>
                <li>
                  <a
                    href="#"
                    className="text-gray-400 hover:text-white transition-colors"
                  >
                    职业培训
                  </a>
                </li>
                <li>
                  <a
                    href="#"
                    className="text-gray-400 hover:text-white transition-colors"
                  >
                    成功案例
                  </a>
                </li>
              </ul>
            </div>
            <div>
              <h4 className="text-lg font-bold mb-6">帮助中心</h4>
              <ul className="space-y-3">
                <li>
                  <a
                    href="#"
                    className="text-gray-400 hover:text-white transition-colors"
                  >
                    常见问题
                  </a>
                </li>
                <li>
                  <a
                    href="#"
                    className="text-gray-400 hover:text-white transition-colors"
                  >
                    使用指南
                  </a>
                </li>
                <li>
                  <a
                    href="#"
                    className="text-gray-400 hover:text-white transition-colors"
                  >
                    隐私政策
                  </a>
                </li>
                <li>
                  <a
                    href="#"
                    className="text-gray-400 hover:text-white transition-colors"
                  >
                    用户协议
                  </a>
                </li>
                <li>
                  <a
                    href="#"
                    className="text-gray-400 hover:text-white transition-colors"
                  >
                    联系我们
                  </a>
                </li>
              </ul>
            </div>
            <div>
              <h4 className="text-lg font-bold mb-6">联系我们</h4>
              <ul className="space-y-3">
                <li className="flex items-start">
                  <div className="w-5 h-5 flex items-center justify-center text-gray-400 mt-1 mr-3">
                    <i className="ri-map-pin-line"></i>
                  </div>
                  <span className="text-gray-400">
                    北京市朝阳区建国路 88 号现代城 A 座 2301
                  </span>
                </li>
                <li className="flex items-center">
                  <div className="w-5 h-5 flex items-center justify-center text-gray-400 mr-3">
                    <i className="ri-phone-line"></i>
                  </div>
                  <span className="text-gray-400">400-888-9999</span>
                </li>
                <li className="flex items-center">
                  <div className="w-5 h-5 flex items-center justify-center text-gray-400 mr-3">
                    <i className="ri-mail-line"></i>
                  </div>
                  <span className="text-gray-400">contact@aipin.com</span>
                </li>
              </ul>
            </div>
          </div>
          <div className="border-t border-gray-800 pt-8">
            <div className="flex flex-col md:flex-row justify-between items-center">
              <p className="text-gray-500 mb-4 md:mb-0">
                © 2025 艾聘 AIPIN. 保留所有权利
              </p>
              <div className="flex space-x-6">
                <div className="w-8 h-8 flex items-center justify-center text-gray-400">
                  <i className="ri-visa-fill ri-lg"></i>
                </div>
                <div className="w-8 h-8 flex items-center justify-center text-gray-400">
                  <i className="ri-mastercard-fill ri-lg"></i>
                </div>
                <div className="w-8 h-8 flex items-center justify-center text-gray-400">
                  <i className="ri-alipay-fill ri-lg"></i>
                </div>
                <div className="w-8 h-8 flex items-center justify-center text-gray-400">
                  <i className="ri-wechat-pay-fill ri-lg"></i>
                </div>
              </div>
            </div>
          </div>
        </div>
      </footer>
    </div>
  );
};
